<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#topBox{
			background:#f00;
			position:fixed;
			top:-100px;
			left:0;
			width:100%;
			font-size:50px;
			font-weight:bold;
			text-align: center;
			line-height:100px;
		}
		#back{
			width:100px;
			height:100px;
			background-color: #abcdef;
			position:fixed;
			right:20px;
			bottom:50px;
			display:none;
		}
	</style>
</head>
<body>
	<div id="topBox">
		顶部通栏广告
	</div>
	<p style="width:20px;">
		锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
		床前明月光，疑是地上霜。举头望明月，低头思故乡。
		
		离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
	</p>
	<div id="back">
		回到顶部
	</div>
</body>
<script type="text/javascript">
	// 1、当滚动距离达到300px时显示出顶部公共
	// 2、当滚动距离达到350px是显示回到顶部
	// 3、当前几回到顶部 慢慢的滑动上去
	window.onscroll = function(){
		//获取当前的滚动距离
		var height = document.documentElement.scrollTop; 
		// if(height>=300){
		// 	document.querySelector('#topBox').style.top = 0;
		// }else{
		// 	document.querySelector('#topBox').style.top = -100+
		// 	'px';
		// }
		document.querySelector('#topBox').style.top = height>=300?0:'-100px';
		// 错误优先
		document.querySelector('#back').style.display = height>=350?'block':'none';	
	}
	var timer;
	document.querySelector('#back').onclick = function(){
		timer = setInterval(function(){
			var height = document.documentElement.scrollTop; 
			if(height<=0){
				clearInterval(timer);
			}else{
				document.documentElement.scrollTop  = height-20; 
			}
		},30)
	}
</script>
</html>